<script setup>
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
} from '@element-plus/icons-vue'
const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  columnData: {
    type: Array,
    default: () => [],
  },
  currentPage:{
    type: Number,
    default:1
  },
  pageSize:{
    type: Number,
    default:0
  },
  total:{
    type: Number,
    default:0
  },
  pageSizes:{
    type: Array,
    default:()=>[10, 20, 30, 50]
  }

});

const emit = defineEmits(['edit','del','handleSizeChange','handleCurrentChange'])
const edit = val=>{
  emit('edit',val)
}
const del = val=>{
  emit('del',val)
}
const handleSizeChange = val=>{
  emit('handleSizeChange',val)
}
const handleCurrentChange = val=>{
  emit('handleCurrentChange',val)
}


</script>

<template>
  <el-table :data="tableData" style="width: 100%" >
    <!-- 序号列 -->
    <el-table-column label="序号" type="index" width="60" align="center" />
    <el-table-column
      v-for="(item, index) in columnData"
      :prop="item.prop"
      :key="index"
      :label="item.label"
      align="center"
    >
      <template #default="{ row }">
        <slot v-if="item.isCustom" :name="item.prop" :row="row"></slot>
        <slot v-else>
          {{ row[item.prop] }}
        </slot>
      </template>
    </el-table-column>
       <!-- 操作列 -->
       <el-table-column label="操作" align="center" :width="100">
                <template #default="{ row }">
                    <el-button type="primary" @click="edit(row.id)" :icon="Edit" circle></el-button>
                    <el-popconfirm title="你确定要删除嘛?" @confirm="del(row.id)">
                        <template #reference>
                            <el-button  type="danger" :icon="Delete" circle ></el-button>
                        </template>
                    </el-popconfirm>


                </template>
            </el-table-column>
  </el-table>
  <br>
  <el-row type="flex" justify="center">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="pageSizes"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-row>
</template>



<style lang="scss" scoped>
</style>